<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>聊天记录</title>
<link rel="stylesheet" href="${ctxPath}/layui/css/modules/layim/layim.css">
<link rel="stylesheet" href="${ctxPath}/layui/css/layui.css">
<style>
body .layim-chat-main{height: auto;}
</style>
</head>
<body>
<div class="layim-chat-main">
  <ul id="LAY_view" style="padding:0px"></ul>
</div>

<div id="LAY_page" style="margin: 0 10px;"></div>


<textarea title="消息模版" id="LAY_tpl" style="display:none;">
	{{# for(var i = 0, len = d.data.length; i < len; i++){   }}
	{{#  if(d.data[i].id == parent.layui.layim.cache().mine.id){  }}
		  <li class="layim-chat-mine">
		  <div class="layim-chat-user"><img src="{{ d.data[i].avatar }}">
		  <cite><i>{{ d.data[i].dateTime }}</i>{{ d.data[i].userName }}</cite></div><div class="layim-chat-text">{{ layui.layim.content(d.data[i].content) }}</div></li>
 	 {{# } else { }}
		    <li><div class="layim-chat-user">
		    <img src="{{ d.data[i].avatar }}">
		    <cite>{{ d.data[i].userName }}<i>{{ d.data[i].dateTime }}</i></cite></div><div class="layim-chat-text">{{ layui.layim.content(d.data[i].content) }}</div></li>
	{{# }  }  }}
</textarea>


<script src="${ctxPath}/resources/js/jquery-2.2.4.min.js"></script>
<script src="${ctxPath}/resources/js/laytpl.js"></script>
<script src="${ctxPath}/resources/laypage/laypage.js"></script>
<script src="${ctxPath}/layui/layui.js"></script>

<script>
layui.use(['layim', 'laypage'], function(){
	demo();
});


function demo(curr) {
	var myId ='${myId}';
	var friendId = '${friendId}';
	var groupId = '${groupId}';
	var type = '${type}';
    var pnum = 0;  	
    $.ajax({
        url : '${ctxPath}/chatrecord/getRecord',
        data:{
    		page : 1,
    		myId : myId,
    		friendId : friendId,
    		groupId : groupId,
    		type : type
    	},
        async : false,
        type : "GET",
        dataType : 'json',
        success : function (result){
           pnum = result.pages;
        }
    });
	 
	 $.getJSON('${ctxPath}/chatrecord/getRecord', {
		page : curr || pnum,
		myId : myId,
		friendId : friendId,
		groupId : groupId,
		type : type
	//向服务端传的参数，此处只是演示
	}, function(res) {
		var html = laytpl(LAY_tpl.value).render(res);
		$('#LAY_view').html(html);
		//此处仅仅是为了演示变化的内容
		laypage({
			cont : 'LAY_page', //容器。值支持id名、原生dom对象，jquery对象。
			pages : res.pages, //通过后台拿到的总页数
			curr : curr || pnum, //当前页
			jump : function(obj, first) { //触发分页后的回调
				if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
					demo(obj.curr);
				}
			}
		});
	});
}
</script>
</body>
</html>
